<template>
  <div>
     <h1>全国天气预报</h1>
     <div>
      <input v-model="city" type="text"><button @click="toSearch">搜索</button>
     </div>
     <div v-if="base.city">
       <h1>你好：今天是{{base.date_day}} </h1>
       <h1>{{base.city}}</h1>
       <h1>时间：{{base.date_h}}</h1>
       <h1>{{base.warmWords}}</h1>
       <div class="tem_list" v-for="item in days" :key="item.date">
        <div class="date"></div>
        <div>{{item.date}}</div>
        <div>{{item.weather}}</div>
        <div>{{item.temperature}}℃</div>
        <div>{{item.manner}}</div>
         <div>{{item.pm}}</div>
       </div>
     </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      city:"", //后台需要的城市名
      base:{},//基本信息
      days:{},//天气列表数据
    }
  },
   methods:{
    toSearch(){ //点击调用天气预报接口
      this.$axios({
        url:"/tianqi/api/weather/",
        method:"get",
        params:{
          city:this.city
        }
      }).then(res=>{
        console.log(res,"天气预报数据")
        this.base=res.data;
        this.days=res.data.data;
        console.log(  this.days,"-------")
      })

    }
   }
}
</script>
<style lang="scss">
   .tem_list{
    width: 800px;
    margin: 0 auto;
    display: flex;
    line-height: 80px;
    justify-content: space-between;
    margin-top: 10px;
    background: pink;
    font-size: 40px;
   }
</style>